<template>
  <div>
    <div class="identity normal center">
      <div class="upload-avatar space-between">
        <div>头像</div>
        <div class="user-add">
          <i class="ion-ios-person-add icon-person"></i>
        </div>
      </div>
      <div class="info center">
        <div class="details space-between" v-for="v in details">
          <div>{{v.name}}</div>
          <input type="text" placeholder="必填">
        </div>
      </div>
      <div class="education center">
        <div class="details space-between" v-for="v in education">
          <div>{{v.name}}</div>
          <input type="text" placeholder="选填" class="small">
        </div>
      </div>
    </div>
    <div class="identity-submit">
      <button type="button">提交</button>
    </div>
  </div>

</template>
<script>
  export default{
    name: 'identity',
    data:function(){
      return {
        details: [
          {name: '昵称'},
          {name: '简介'},
          {name: '性别'},
          {name: '年龄'}
        ],
        education: [
          {name: '学历'},
          {name: '学校'},
          {name: '职业'}
        ]
      }
    },
    methods: {
      routerBack:function(){
        this.$router.back()
      }
    }
  }
</script>
<style>
  .identity {
    background: #efeff4;
    height: 100%;
  }

  .identity > header {
    width: 100%;
    height: 107px;
    background: #f76c41;
    line-height: 107px;
    color: #fff;
  }
  .back{
    margin-right: 16%;
  }

  .upload-avatar {
    width: 100%;
    height: 40px;
    background: #fff;
    margin: 16px 0;
  }

  .upload-avatar div {
    margin: 5%;
  }

  .user-add {
    width: 30px;
    height:30px;

    border-radius: 50%;
    background: #d4d4d4;
    margin-top: 5px !important;
  }

  .icon-person {
    color: #fff;
    font-size: 30px;
  }

  .info {
    width: 100%;
    background: #fff;
  }
 .education{
    width: 100%;
    margin-top: 20px;
   background: #fff;
 }
  .details {
    width: 90%;
    height: 40px;
    line-height: 40px;
    border-bottom: 1px solid #efeff4;
  }

  .details input {
    border: 0;
    text-align: right;
    outline: none;
    height: 38px;
    -webkit-tap-highlight-color:#fff
  }

  input::-webkit-input-placeholder {
    color: #c7c7cd;
  }
  .identity-submit button{
    width: 40%;
    height: 30px;
    line-height: 30px;
    color: #fff;
    font-size: 16px;
    letter-spacing: 5px;
    background: #f76c41;
    border: none;
    margin: 25px 0;
    border-radius: 20px;
  }
</style>
